<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.box {
			display: flex;
			margin: 50px;
		}

		.up {
			margin-right: 100px;
			cursor: pointer;
		}

		table {
			border-collapse: collapse;
			width: 500px;
			text-align: center;
			margin-bottom: 50px;
		}

		th,
		td {
			border: 1px rgb(170, 168, 168) solid;
			padding: 10px;
		}

		.down>div>div {
			margin-top: 20px;
		}

		.active {
			background: rgb(176, 169, 169);
			color: white;
		}

		.down>div {
			display: none;
		}

		.down .show {
			display: block;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="up">
			<h1>基本信息</h1>
			<h1>信息录入</h1>
		</div>
		<div class="down">
			<div class="show">
				<table>
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>住址</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
				<button onclick='gehangFn(this)'>开启隔行变色</button>
				<button onclick='searchFn()'>搜索</button>
				<input type="text" id="put" value="" />
			</div>
			<div>
				<div>
					<label for="user">姓名：</label>
					<input type="text" id="user" />
				</div>
				<div>
					<label for="age">年龄：</label>
					<input type="text" id="age" />
				</div>
				<div>
					<label for="">住址</label>
					<select id="address-select">
						<option value="0">安徽</option>
						<option value="1">河南</option>
						<option value="2">上海</option>
						<option value="3">天津</option>
					</select>
				</div>
				<div>
					<button id="btn">提交</button>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	const user = document.querySelector('#user');
	const age = document.querySelector('#age');
	const sel = document.querySelector('#address-select');
	const btn = document.querySelector('#btn');
	const tbody = document.querySelector('tbody');
	const input = document.querySelector('#put');
	const h1s = document.querySelectorAll('.up>h1');
	const divs = document.querySelectorAll('.down>div');
	
	let arr = JSON.parse(localStorage.arr725 || '[]');

	function show() {
		tbody.innerHTML = arr.map((item, index) => `
			<tr>
				<td>${index + 1}</td>
				<td>${item.user}</td>
				<td>${item.age}</td>
				<td>${adressFn(item.sel)}</td>
				<td>
					<button onclick="del(${item.id})">删除</button>
					<button onclick="edit(${item.id}, this)">修改</button>
				</td>
			</tr>
		`).join('');
	}

	function adressFn(num) {
		const addresses = ['安徽', '河南', '上海', '天津'];
		return addresses[Number(num)] || '';
	}

	h1s.forEach((h1, index) => {
		h1.onclick = () => {
			h1s.forEach((h, i) => {
				h.classList.remove('active');
				divs[i].classList.remove('show');
			});
			h1.classList.add('active');
			divs[index].classList.add('show');
		};
	});

	btn.onclick = () => {
		const obj = {
			id: Date.now(),
			user: user.value,
			age: age.value,
			sel: sel.value
		};
		arr.push(obj);
		localStorage.arr725 = JSON.stringify(arr);
		show();
		h1s[0].click();
	};

	function edit(id, self) {
    if (self.innerHTML === "修改") {
        const obj = arr.find(v => v.id === id);
        if (obj) {
            user.value = obj.user;
            age.value = obj.age;
            sel.value = obj.sel;
            self.innerHTML = '完成修改';
            h1s[1].click(); 
        }
    } else {
        const index = arr.findIndex(v => v.id === id);
        if (index !== -1) {
            arr[index] = {
                id,
                user: user.value,
                age: age.value,
                sel: sel.value
            };
            localStorage.arr725 = JSON.stringify(arr);
            show();
            self.innerHTML = '修改';
        }
    }
}


	function gehangFn(self) {
		const trs = document.querySelectorAll('tbody tr');
		const isActive = self.innerHTML === "开启隔行变色";
		self.innerHTML = isActive ? '关闭隔行变色' : '开启隔行变色';
		trs.forEach((tr, i) => {
			tr.classList.toggle('active', isActive && i % 2 === 0);
		});
	}

	function del(id) {
		const index = arr.findIndex(v => v.id === id);
		if (index !== -1) {
			arr.splice(index, 1);
			localStorage.arr725 = JSON.stringify(arr);
			show();
		}
	}

function searchFn() {
    const query = input.value.trim(); // Trim whitespace from the input value
    if (query === '') {
        alert("搜索框不能为空"); 
        return; 
    }

    const trs = document.querySelectorAll('tbody tr');
    trs.forEach(tr => tr.classList.remove('active'));
    arr.forEach((item, i) => {
        if (item.user.toLowerCase().includes(query) || 
            item.age.includes(query) || 
            adressFn(item.sel).toLowerCase().includes(query)) {
            trs[i].classList.add('active');
        }
    });
}


	show();
</script>

</html>
